<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d转换</title>

    <style>
        .parent{
            width: 200px;
            height: 200px;
            background: pink;

            /*透视，呈现出伪3d*/
            perspective: 500px;

        }

        .son{
            width: 100%;
            height: 100%;
            background: blue;

            /*3d 效果 无非就是在2d的基础上增加了z轴*/
            transform: translateZ(-100px);

            /*translate3d(x,y,z)*/
            /*transform: translate3d(-10px,-10px,-100px );*/
        }

        .son:hover{
            transform: perspective(400px) scaleZ(1);
        }

        img:hover{
            /*transform:rotate(180deg);*/
            transform:rotateZ(180deg);

        }

        img{
            transition: all 3s linear;
        }


    </style>

</head>
<body>

<div class="parent">
    <div class="son"></div>
</div>


<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

</body>
</html>